/* flex 弹性布局
------------------------------- */
.flex {
  display: flex;
}
.flex-auto {
  flex: 1;
}
.flex-center {
  @extend .flex;

  align-items: center !important;
}
.flex-justify-center {
  @extend .flex;

  align-items: center;
  justify-content: center;
}
.flex-row {
  @extend .flex;

  align-items: center;
  justify-content: space-between;
}
.flex-around {
  @extend .flex;

  align-items: center;
  justify-content: space-around;
}
.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.flex-column {
  @extend .flex;

  flex-direction: column;
}
.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center !important;
}
.align-end {
  align-items: flex-end !important;
}

/* 自定义 */
.over-auto {
  overflow: auto !important;
}
.over-hidden {
  overflow: hidden !important;
}

/* 宽高 100%
------------------------------- */
.w100 {
  width: 100% !important;
}
.h100 {
  height: 100% !important;
}
.vh100 {
  height: 100vh !important;
}
.max100vh {
  max-height: 100vh !important;
}
.min100vh {
  min-height: 100vh !important;
}

/* 颜色值
------------------------------- */
.color-primary {
  color: var(--color-primary) !important;
}
.color-desc {
  color: var(--color-desc) !important;
}
.color-cancel {
  color: var(--color-cancel) !important;
}
.color-error {
  color: var(--color-error) !important;
}
.color-warning {
  color: var(--color-warning) !important;
}
.color-sub {
  color: var(--color-sub) !important;
}
.color-success {
  color: var(--color-success) !important;
}

/* 字体大小全局样式
------------------------------- */
@for $i from 10 through 30 {
  .font#{$i} {
    font-size: #{$i}px !important;
  }
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 0 through 30 {
  .m#{$i} {
    margin: #{$i}px !important;
  }
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }
  .mr#{$i} {
    margin-right: #{$i}px !important;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml#{$i} {
    margin-left: #{$i}px !important;
  }
  .p#{$i} {
    padding: #{$i}px !important;
  }
  .pt#{$i} {
    padding-top: #{$i}px !important;
  }
  .pr#{$i} {
    padding-right: #{$i}px !important;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
}

// 主内容区动画
.main-enter-active {
  transition: 0.2s;
}
.main-leave-active {
  transition: 0.15s;
}
.main-enter-from {
  opacity: 0;
  margin-left: -20px;
}
.main-leave-to {
  opacity: 0;
  margin-left: 20px;
}

// 自定义
.txt-center {
  text-align: center;
}
.hand {
  cursor: pointer;
}
